.el-button {
  font-size: var(--theme-font-size-primary);
  border-radius: var(--theme-border-radius);

  & + .el-button {
    margin-left: 12px;
  }
  &.bold {
    font-weight: 600;
    [class^="el-icon-"] {
      font-weight: 600;
    }
  }
  &.normal,
  &.secondary,
  &.primary {
    padding: 9px 10px;
    span {
      padding: 0 15px;
    }
  }
  &.normal {
    color: var(--theme-color-text-regular);
    border-color: var(--theme-color-border);
    background-color: #ffffff;
    &:hover,
    &:active {
      color: var(--theme-color-text-regular);
      border-color: var(--theme-color-border);
      background: rgba(212, 216, 231, 0.15);
    }
    &.is-disabled {
      opacity: 0.5;
      &:hover {
        color: var(--theme-color-text-regular);
        border-color: var(--theme-color-border);
        background-color: #ffffff;
      }
    }
  }
  &.secondary {
    color: var(--theme-color-primary);
    border-color: var(--theme-color-primary);
    background-color: #ffffff;
    &:hover,
    &:active {
      color: var(--theme-color-primary);
      border-color: var(--theme-color-primary);
      background: #ecf2fd;
    }
    &.is-disabled {
      opacity: 0.5;
      &:hover {
        color: var(--theme-color-primary);
        border-color: var(--theme-color-primary);
        background-color: #ffffff;
      }
    }
  }
  &.primary {
    color: #ffffff;
    border-color: var(--theme-color-primary);
    background-color: var(--theme-color-primary);
    &:hover,
    &:active {
      color: #ffffff;
      border-color: #0f3eaa;
      background: #0f3eaa;
    }
    &.is-disabled {
      opacity: 0.5;
      &:hover {
        color: #ffffff;
        border-color: var(--theme-color-primary);
        background-color: var(--theme-color-primary);
      }
    }
  }
  &.is-plain:hover,
  &.is-plain:focus {
    color: var(--theme-color-1);
    border-color: var(--theme-color-1);
  }
}
